<template>
  <div class="container">
    <navigate> 发起线上咨询 </navigate>

    <div class="card flex_row flex_align_center">
      <img :src="joinUrlImg(info.avatar)" alt="" class="avatar" />
      <div class="name_label flex_column">
        <div class="name">{{ info.name + "(" + info.age + "岁)" }}</div>
        <div class="label flex_row">
          <div class="text nowrap">标签:</div>
          <div class="icon">
            <img
              v-for="(e, i) in info.userTag"
              :key="i"
              :src="joinUrlImg(e.tag_icon)"
              alt=""
              class="label_icon"
            />
          </div>
        </div>
      </div>
      <!-- <div class="status">{{ "在线中" }}</div> -->
    </div>

    <div class="card2">
      <div class="item flex_row flex_align_center between">
        <div class="label">专家性别：</div>
        <div class="val">{{ info.sex == 1 ? "男" : "女" }}</div>
      </div>
      <!-- <div class="item flex_row flex_align_center between">
        <div class="label">我咨询过：</div>
        <div class="val">{{ info.consultant_num }}</div>
      </div> -->
      <!-- <div class="item flex_row flex_align_center between">
        <div class="label">负责部门：</div>
        <div class="val">{{ info.department_name }}</div>
      </div>-->
      <div
        class="item flex_row flex_align_center between intro flex_row flex_align_center"
      >
        <div class="label title">专家简介:</div>
        <div
          class="val detail"
          @click="$router.push(`/consultantInfo?id=${info.id}`)"
        >
          详情>>
        </div>
      </div>

      <div class="intro_content">
        {{
          info.consultant_introduction
            ? info.consultant_introduction
            : "暂无简介"
        }}
      </div>
    </div>

    <div class="fill_info_title flex_row flex_align_center">
      <div class="bar"></div>
      <div class="text">填写咨询信息</div>
    </div>
    <van-cell-group class="input_outer father_relative">
      <van-field
        readonly
        clickable
        v-model="currentQuestionType.name"
        label="问题类型"
        placeholder="暂未选择"
        @click="visibleQuestionType = true"
      />
      <v-picker
        :columns="questionType"
        valueKey="name"
        @confirm="selectQuestionType"
        :isVisible="visibleQuestionType"
        @cancel="visibleQuestionType = false"
      />
      <img
        src="@/assets/images/common/right.png"
        class="right vertical_center"
        alt=""
      />
    </van-cell-group>
    <div class="card3">
      <div class="describe flex_row flex_align_start">
        <div class="label">问题描述：</div>

        <textarea
          class="textarea"
          placeholder="请输入问题描述。"
          v-model="questionDetail"
        >
        </textarea>
      </div>
    </div>

    <div class="footer flex_row flex_align_center between">
      <div class="checkbox_box flex_row flex_align_center">
        <checkbox @getCheckboxValue="checkboxChange"></checkbox>
        <div class="text">
          我已阅读并同意<span @click="show = true">《咨询服务协议》</span>。
        </div>
      </div>
      <button class="btn" @click="submit">提交咨询</button>
    </div>
    <consulting-service-agreement :visible="show" @close="show = $event" />
  </div>
</template>

<script>
import {
  queryUserInfo,
  queryQuestionSelector,
  submitConsultation,
} from "@/api/consultation/online.js";
import selectQuestionType from "@/mixins/selectQuestionType.js";
import consultingServiceAgreement from "@/components/consultingServiceAgreement/index.vue";
import { joinUrlImg } from "@/utils/setUrlImg";
export default {
  name: "launch",
  mixins: [selectQuestionType],
  components: {
    consultingServiceAgreement,
  },
  data() {
    return {
      // 显示协议
      show: false,
      info: {},
      // 同意咨询服务协议
      checkbox: false,
      // 离开页面保存的数据
      pageData: null,
      consult_id: "",
    };
  },
  methods: {
    joinUrlImg,

    async getUserInfo(id) {
      let res = await queryUserInfo({ id });
      if (res.code == 200) {
        this.info = res.data;
      }
    },
    async getQuestionSelector() {
      let res = await queryQuestionSelector();
    },
    // 提交咨询
    async submit() {
      if (!this.currentQuestionType.name)
        return this.$toast.fail("请选择问题类型！");
      if (!this.questionDetail) return this.$toast.fail("请描述问题！");
      if (!this.checkbox) return this.$toast.fail("请同意咨询服务协议");

      const params = {
        consult_id: this.$route.query.id,
        question_id: this.currentQuestionType.id,
        question: this.questionDetail,
      };
      let res = await submitConsultation(params);
      if (res.code == 200) {
        this.$toast.success("提交咨询成功！");
        this.$router.push("/nav/consult");
      }
    },
    checkboxChange(e) {
      this.checkbox = e;
    },
  },
  created() {
    this.getUserInfo(this.$route.query.id);
  },
  // beforeRouteEnter(to, from, next) {
  //   next((vm) => {
  //     // 如果有从上一个页面传递下来的数据
  //     if (from.meta.pageData && from.name == "consultantInfo") {
  //       vm.currentQuestionType = from.meta.pageData.data1;
  //       vm.questionDetail = from.meta.pageData.data2;
  //     }
  //   });
  // },
  // beforeRouteLeave(to, from, next) {
  //   // 将页面数据保存到目标页面的meta字段中
  //   if (to.name == "consultantInfo") {
  //     this.pageData = {
  //       data1: this.currentQuestionType,
  //       data2: this.questionDetail,
  //     };
  //     to.meta.pageData = this.pageData;
  //   }
  //   next();
  // },
};
</script>

<style lang="less" scoped>
@import "./css/index.less";
</style>
